<html>
  <head>
    <title>Sciter ImGraphics</title>
    <style>
      html { background: transparent; }
      widget.drawing
      {
        prototype:Drawable;
        size: *;
      }
      
    </style>
    <script type="text/tiscript">
      class Drawable : Behavior
      {
        const SCALE_STEP = 0.005;
        const MOTION_TRACE_FACTOR = 0.8; // smaller number - smaller tail
        function attached() 
        { // attaching the paint() to paintContent layer handler
          this.paintContent = this.paint;
          this.image = this.loadImage("last-diligence-from-gabriola.jpg");
          this.post(::this.animate(this.animationStep));
          this.scale = 1.0;
          this.scaleStep = -SCALE_STEP;
          this.corner = 0;
        }
        
        // function is called while handling WM_PAINT 

        function paint(gfx) {
          if( !this.image ) return;          
          var (w,h) = this.box(#dimension);
          var (iw,ih) = this.image.size();

          // paints previous frame and new content on top of it
          var framePaint = | gfx {

            if(this.pframe) // blending previous content 
              gfx.blendImage(this.pframe,0,0,w,h,MOTION_TRACE_FACTOR);

            // drawing content in new sate
            iw *= this.scale;
            ih *= this.scale;
            
            var x = (w-iw)/2.0, y = (h-ih)/2.0;
            var dx = (1.0-this.scale)*(w-iw);
            var dy = (1.0-this.scale)*(h-ih);
            switch(this.corner)
            {
              case 0: x -= dx; y -= dy; break;
              case 1: x += dx; y -= dy; break;
              case 2: x += dx; y += dy; break;
              case 3: x -= dx; y += dy; break;
            }
            gfx.drawImage(this.image,x,y,iw,ih);
          };

          var frame = new Image(w,h,framePaint);
          gfx.drawImage(frame,0,0,w,h);
          if(this.pframe) 
            this.pframe.destroy();
          this.pframe = frame;
        }
        
        function animationStep()
        {
          if(this.scaleStep < 0.0) 
          {
            if( this.scale < 0.5 ) { this.scale = 0.5; this.scaleStep = SCALE_STEP; }
            else this.scale += this.scaleStep;
          } else {
            if( this.scale >= 1.0 ) { this.scale = 1.0; this.scaleStep = -SCALE_STEP; this.corner = (this.corner + 1) % 4;}
            else this.scale += this.scaleStep;
          }
          this.refresh();
          return 32; // 30 FPS
        }
      }
      
    </script>
  </head>
<body>
  <widget .drawing></widget>
</body>
</html>